{% extends "_layouts/examples.html" %}
{% block title %}Notifications / Borderless{% endblock %}

{% block standalone_css %}patterns_notifications{% endblock %}

{% block content %}
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td colspan="4">
        <div class="p-notification--caution is-borderless u-no-margin--bottom">
          <div class="p-notification__content">
            <h5 class="p-notification__title">Title</h5>
            <p class="p-notification__message">
              Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
            </p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>
{% endblock %}
